import { Component, OnInit } from '@angular/core';
import mapboxgl from 'mapbox-gl';
import MapboxLanguage  from '@mapbox/mapbox-gl-language' ;     


@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  //   mapboxgl.accessToken = 'pk.eyJ1Ijoia2pkYXlkYXl1cCIsImEiOiJja2xieWF6enkwMnBjMnVueWd0M3NtZDUyIn0.jHf6u7Kts014dfvW7QLwIg';
  //   mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
  //   const map = new mapboxgl.Map({
  //     container: 'map', // container ID
  //     style: 'mapbox://styles/mapbox/dark-v10', // style URL
  //     center: [117, 38], // starting position [lng, lat]
  //     zoom: 9 // starting zoom
  //   });
  //   // Add zoom and rotation controls to the map.
  //  // map.addControl(new mapboxgl.NavigationControl());
    

  //  var language = new MapboxLanguage({ defaultLanguage: "zh" });
  //  map.addControl(language);


   mapboxgl.accessToken =
        "pk.eyJ1Ijoia2pkYXlkYXl1cCIsImEiOiJja2xieWF6enkwMnBjMnVueWd0M3NtZDUyIn0.jHf6u7Kts014dfvW7QLwIg";
// 英文标注转换为中文   
   mapboxgl.setRTLTextPlugin(
        "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
      );
      const map = new mapboxgl.Map({
        container: 'map',
        style: "mapbox://styles/mapbox/streets-v9",
        center: [114, 38.54],
        zoom: 6
      });
      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      map.addControl(language);

  }
}
